<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Coffee 菜单</title>
<style>
  h1 {text-align: center;}
  li ul li {list-style-type: none;
  background-color: brown;
  border: 1px, solid;
  margin-bottom: 2px;
  opacity: 0.75;
  }
  ul > li.star {
    list-style-type: '✨';
  list-style-position: inside;}
  
  ol>li {
  height: 1.2em; overflow: hidden;
  }
  ol>li:hover {
    height: 5em;
    transition-property: height;
    transition-duration: 1s;
  }
  ol>li#milktea:hover {
    height: 15em;
    transition-property: height;
    transition-duration: 1s;
  }
  .title {background-color: green;
  margin-top: 1px;}
  
  .limited:after {content: "每日限量5杯"}
  
  ol {width: 60%;
  height: 100%;
  background-image: url("coffee-logo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;}
</style>
</head>
<body>
<h1>菜💗单</h1>
<ol>
<li id='coffee'>
<div class='title'>咖啡</div>
<ul>
<li>
美式咖啡，12（冰/热/常温）
</li>
<li>
拿铁， 18（冰/热/常温）
</li>
</ul>
</li>
<li id='milktea'>
<div class='title'>奶茶</div>
<ul>
<li class='star limited'>芋泥波波牛乳，20</li>
<li class='limited'>芋泥波波奶茶，20</li>
<li class='limited'>混勃勃奶茶王, 20</li>
<li class='limited'>混啵啵芋泥奶茶王，22</li>
<li>黑糖牛乳啵啵, 14</li>
<li>黑糖啵啵奶茶, 12</li>
<li>厚蛋糕烧芝士奶茶，20</li>
</ul>
</li>
</ol>
</body>
</html>
